<template>
    <div class="category">
         <!-- 搜索框 -->
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
        <!-- 下方内容 -->
        <div class="bottom_box">
            <!-- 左侧边栏 -->
            <van-sidebar v-model="activeKey">
                <van-sidebar-item
                :title="item.name"
                v-for="item in categoryList"
                :key="item.id"
                @click="onChange(item.id)"/>             
            </van-sidebar>
            <!-- 右边盒子 -->
            <div class="right">
                <img :src="currentCategory.banner_url" alt="">
                <p>{{currentCategory.front_name}}</p>
                <div class="right1">
                    <span></span>
                    <h4>{{currentCategory.name}}</h4>
                </div>
                <van-grid :column-num="3" :border="false">
                    <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id" :icon="item.banner_url" :text="item.name" />
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script>
import { getCategoryData , getCurrentCategory } from '@/utils/http'
export default {
    name: "Category",
    props: [""],
    data() {
        return {
            value:'',    // 搜索关键字
            activeKey: 0,  //默认的导航索引
            categoryList:[], //左侧导航
            currentCategory:[],  // 当前分类
        };
    },

    components: {},

    computed: {},

    created() {
        // 初始化执行
        this.getData()
    },

    mounted() {},

    methods: {
        onChange(id){
            // 切换左边侧边导航
            // this.activeKey = index;
            // console.log(id);
            getCurrentCategory({id:id}).then((res)=>{
                console.log(res);
                this.currentCategory = res.data.data.currentCategory;
            }).catch((e)=>{
                console.log(e);
            })
        },
        getData(){
            getCategoryData().then((res)=>{
                console.log(res);
                this.categoryList=res.data.data.categoryList;
                this.currentCategory=res.data.data.currentCategory;
            })
        }
    },
};
</script>
<style lang="less" scoped>
.bottom_box{
    display: flex;
    .right{
        flex: 1;
        position: relative;
        margin-left: 5px;
        img{
            width:97%;
            height: 140px;
            border-radius: 5px;
            box-shadow: 0 0 8px #000;
            filter: brightness(.5);
            display: block;
        }
        p{
            color: #fff;
            position: absolute;
            top: 12%;
            left: 30%;
            z-index: 222;
            font-size: 16px;
            font-weight: 400;
            text-align: center;
        }
        .right1{
            width: 100%;
            height: 60px;
            position: relative;
            background: #fff;
            font-size: 16px;
            span{
                width: 50%;
                height: 1.5px;
                background-color: #ccc;
                position: absolute;
                margin: auto;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
            }
            h4{
                width: 30%;
                height: 40px;
                background-color: #fff;
                position: absolute;
                margin: auto;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                line-height: 40px;
                text-align: center;
                color: #000;
            }
        }
    }
}
</style>